import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_shop_z/config/service_url.dart';
import 'package:flutter_shop_z/model/category_sub.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_shop_z/pages/category_page/bloc/category_bloc.dart';
import 'package:flutter_shop_z/pages/category_page/bloc/category_sub_bloc.dart';

class RightCategoryNav extends StatefulWidget {
  _RightCategoryNavState createState() => _RightCategoryNavState();
}

class _RightCategoryNavState extends State<RightCategoryNav> {
  List<CategorySub> childCategorySub = [];
  int currentCategoryId = 0;
  int listIndex = 0;
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<CategoryBloc, CategoryState>(builder: (context, state) {
      if (state.categorySubList == null) {
        return Text("加载中 ");
      } else {
        childCategorySub.clear();
        state.categorySubList.forEach((v) {
          childCategorySub.add(CategorySub.formJson(v));
        });
        if (currentCategoryId == childCategorySub[0].categoryId) {
          BlocProvider.of<CategorySubBloc>(context)
              .add(SetCategorySubEvent(childCategorySub[listIndex]));
        } else {
          listIndex = 0;
          BlocProvider.of<CategorySubBloc>(context)
              .add(SetCategorySubEvent(childCategorySub[listIndex]));
        }
        currentCategoryId = childCategorySub[0].categoryId;

        return Container(
          height: ScreenUtil().setHeight(70),
          width: ScreenUtil().setWidth(570),
          decoration: BoxDecoration(
            color: Colors.white,
            border: Border(
              bottom: BorderSide(
                width: 1,
                color: Colors.black12,
              ),
            ),
          ),
          child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: childCategorySub.length,
            itemBuilder: (child, index) {
              return _rightInkWell(childCategorySub[index], index);
            },
          ),
        );
      }
    });
  }

  Widget _rightInkWell(CategorySub categorySub, int index) {
    return InkWell(
      onTap: () {
        setState(() {
          listIndex = index;
        });
        BlocProvider.of<CategorySubBloc>(context)
            .add(SetCategorySubEvent(categorySub));
      },
      child: Container(
        padding: EdgeInsets.all(8),
        child: categorySub.categorySubId == -1
            ? Text(
                categorySub.categorySubName,
                style: TextStyle(
                  fontSize: ScreenUtil().setSp(28),
                ),
              )
            : Container(
                child: Row(
                  children: [
                    Image.network(
                      "${serviceUrl}${categorySub.categorySubImg}",
                      width: ScreenUtil().setWidth(30),
                    ),
                    Text(
                      categorySub.categorySubName,
                      style: TextStyle(fontSize: ScreenUtil().setSp(28)),
                    ),
                  ],
                ),
              ),
        decoration: BoxDecoration(
          color: index == listIndex ? Colors.black12 : Colors.white,
          border: Border(right: BorderSide(color: Colors.black12, width: 0.8)),
        ),
      ),
    );
  }
}
